import __DB__               from '../db/index.js';
import __formate__          from '../formate/index.js';
import __tool__             from '../tool/index.js';
import __automatic__        from './automatic.js';// 关联线

class lineClass{
    constructor(){
        this.lines = [];
        this.automaticLines = [];
        this.colors = ['#F6753B'];
    }

    // 初始化画线需要的画布
    canvasInit(){
        let canvas = document.getElementById('xCanvas');

        let w = parseInt(canvas.style.width);
        let h = parseInt(canvas.style.height);
        let html = `
            <svg
                class="xmd-svg"
                id="svg"
                width="${w}"
                height="${h}"
                version="1.1"
                ></svg>
            <svg
                class="xmd-svg-automatic"
                id="automaticConnection"
                width="${w}"
                height="${h}"
                version="1.1"
                ></svg>
            <svg
                class="xmd-svg-automatic-direction"
                id="automaticConnectionDirection"
                width="${w}"
                height="${h}"
                version="1.1"
                ></svg>
            
        `;

        let html2 = `
            <svg
            class="xmd-svg-svgDirection"
            id="svgDirection"
            width="${w}"
            height="${h}"
            version="1.1"
            ></svg>
        `;

        let canvasLineEl = document.getElementById('canvasLine');
        canvasLineEl.innerHTML = html;

        let canvasLineTestEl = document.getElementById('canvasTestLine');
        canvasLineTestEl.innerHTML = html2;
    }

    // 使用线路
    use(){
        this.lines = [];
        if(!__formate__.nodesMany || __formate__.nodesMany.length === 0)return;
        this.formate(__formate__.nodesMany);
        this.draw(__formate__.nodesMany);

        if(__formate__.nodesManyFree && __formate__.nodesManyFree.length > 0){
            this.formate(__formate__.nodesManyFree);
            this.draw(__formate__.nodesManyFree);
        }
        
        __automatic__.use();
    }
    
    // 常规线路-格式化
    formate(res){
        let _paths = [];
        res.length>0&&recursion(res);
        this.lines = [...this.lines,..._paths];
        function recursion(items){
            items.forEach(el=>{
                if(el.root){
                    if(el.node.childrenRoot.flip.length > 0){
                        rpg({
                            id:el.id,
                            label:el.label,
                            flip:true,
                            children:el.node.childrenRoot.flip,
                        });
                    }
                    
                    if(el.node.childrenRoot.unFlip.length > 0){
                        rpg({
                            id:el.id,
                            label:el.label,
                            flip:false,
                            children:el.node.childrenRoot.unFlip,
                        });
                    }
                }
                else{
                    if(el.node.children.length > 0){
                        rpg({
                            id:el.id,
                            label:el.label,
                            flip:el.flip,
                            children:el.node.children,
                        });
                    }
                }
            })
        }

        function rpg(item) {
            let s = {
                id      :item.id,
                label   :item.label,
            }

            if(item.flip){
                s.poi = __DB__.get(item.id).node.init.point.ad;
            }
            else{
                s.poi = __DB__.get(item.id).node.init.point.bc;
            }

            item.children.forEach(el=>{
                let e = {
                    id      :el.id,
                    label   :el.label,
                }

                e.poi = el.flip?__DB__.get(el.id).node.init.point.bc:__DB__.get(el.id).node.init.point.ad;
                _paths.push({
                    flip:item.flip,
                    s:__tool__.deepCopy(s),
                    e:__tool__.deepCopy(e),
                });                    
            })
            if(item.children.length > 0)recursion(item.children);
        }
    }

    // 常规路径-绘制
    draw(){
        let canvas = document.getElementById('xCanvas');

        let w = canvas.getBoundingClientRect().width;
        let h = canvas.getBoundingClientRect().height;

        let color = __DB__.publicData.style.line.color||'#000';// 颜色配置
        let lineSize = __DB__.publicData.style.line.size||2;
        let html = '';
        this.lines.forEach(el=>{
            let line = this.path(el);
            html += `
                <path
                    fill="none"
                    stroke="${color}"
                    opacity="1"
                    stroke-width="${lineSize}"
                    pointer-events="stroke"
                    d="${line}"
                    ></path>
            `;
        });

        let canvasLineEl = document.getElementById('svg');
        canvasLineEl.innerHTML = html;        
    }

    // 常规路径-路径生成器
    path(res){
        let s = {},
            e = {};

        let step = 30;
        let sPoi = res.s.poi;
        let ePoi = res.e.poi;
        
        let s_mid_y = parseInt(sPoi[1]);
        let e_mid_y = parseInt(ePoi[1]);
        
        return res.flip?fn_left():fn_right();

        function fn_left(){
            s.x = parseInt(sPoi[0]);
            s.y = parseInt(sPoi[1]);
            e.x = parseInt(ePoi[0]);
            e.y = parseInt(ePoi[1]);

            let M  = s.x  + "," + s.y;
            let L1 = (s.x - step) + "," + s.y;
            let L2 = (s.x - step) + "," + (e.y);
            let L3 = e.x + "," + e.y;
            let N1 = `a 10,10 0 0 0 -10,-10`;
            let N2 = `a 10,10 0 0 1 -10,10`;
            let A = '';

            if(s_mid_y > e_mid_y){
                L2 = (s.x - step) + "," + (e.y + 10);
                A = N1;
            }
            else if(s_mid_y < e_mid_y){
                L2 = (s.x - step) + "," + (e.y - 10);
                A = N2;
            }

            return `M ${M} L ${L1} L ${L2} ${A} L ${L3}`;
        }

        function fn_right(){
            s.x = parseInt(sPoi[0]);
            s.y = parseInt(sPoi[1]);
            e.x = parseInt(ePoi[0]);
            e.y = parseInt(ePoi[1]);

            let M  = (s.x - 0)  + "," + s.y;
            let L1 = (s.x + step) + "," + s.y;
            let L2 = (s.x + step) + "," + (e.y);
            let L3 = e.x + "," + e.y;
            // let N1  = `a 10,10 0 0 1 10,-10`;
            // let N2  = `a 10,10 0 0 0 10,10`;
            let N1  = `a 10,10 0 0 1 10,-10`;
            let N2  = `a 10,10 0 0 0 10,10`;
            let A = '';

            if(s_mid_y > e_mid_y){
                L2 = (s.x + step) + "," + (e.y + 10);
                A = N1;
            }
            else if(s_mid_y < e_mid_y){
                L2 = (s.x + step) + "," + (e.y - 10);
                A = N2;
            }

            return `M ${M} L ${L1} L ${L2} ${A} L ${L3}`;
        }
    }

    // 添加线
    add(res){
        let elSVG = document.getElementById('svgDirection');

        let x1 = res.x1,
            x2 = res.x2,
            y1 = res.y1,
            y2 = res.y2;
        
        let id = res.id;

        let color = this.colors[0];
        let contactLineSize = 2;
        let line = `
            <line 
                id="${id}" 
                x1="${x1}" 
                y1="${y1}" 
                x2="${x2}" 
                y2="${y2}" 
                style="stroke:${color};stroke-width:${contactLineSize};z-index:10;pointer-events:visiblePainted" 
                />
        `;
        
        elSVG.innerHTML += line;
    }

    // 删除线
    del(res){
        if(!res || Object.keys(res).length === 0)return;
        let id = res.id;
        if(!id)return;
        let elSVG = document.getElementById('svgDirection');
        let elLine = document.getElementById(id);
        if(elLine)elSVG.removeChild(elLine);
    }

    /*
        add(res,tt){
            let elSVG = document.getElementById('svg');

            let x1 = res.x1,
                x2 = res.x2,
                y1 = res.y1,
                y2 = res.y2;
            
            let id = res.id;

            let color = this.colors[0];
            let contactLineSize = $init.style.contactLine.size;
            let line = `
                <line 
                    id="${id}" 
                    x1="${x1}" 
                    y1="${y1}" 
                    x2="${x2}" 
                    y2="${y2}" 
                    style="stroke:${color};stroke-width:${contactLineSize};z-index:10;pointer-events:visiblePainted" 
                    />
            `;
            
            elSVG.innerHTML += line;
        }

        // 删除树结构线
        del(res){
            if(!res || Object.keys(res).length === 0)return;
            let id = res.id;
            if(!id)return;
            let elSVG = document.getElementById('svg');
            let elLine = document.getElementById(id);
            if(elLine)elSVG.removeChild(elLine);
        }
    
    */
}

let line = new lineClass();
export default line;